<template>
  <div>
    <div class="box">
      <input
        v-for="(item,index) of inputArr"
        :type="item.type"
        :placeholder="'请输入'+item.name"
        :key="index"
        v-model="itemData[index]['value']"
      />
      <button @click="overClick">{{btnValue}}</button>
      <p>忘记密码?</p>
    </div>
  </div>
</template>

<script>
export default {
  props: ["inputArr",'btnValue'],
  data() {
    return {
      itemData:this.inputArr
    }
  },
  methods:{
    overClick(){
     this.$emit('overClick',this.itemData); 
    }
  }
};
</script>

<style lang="less" scoped>
.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  input,
  button {
    width: 72.222vw;
    height: 13.889vw;
  }
  input {
    margin-bottom: 10.001px;
    border-radius: 2.778vw;
    background-color: #f7f7f7;
    text-indent: 2em;
  }
  button {
    color: #6ad061;
    font-size: 6.667vw;
    font-weight: 700;
    border-radius: 6.944vw;
    background-color: #c7f77f;
  }
  p {
    padding-top: 2.778vw;
    font-size: 3.889vw;
  }
}
</style>